<style type="text/css">
    .hl-kegiatan {
        display: block;
    }

    .beritabox {
        display: block;
        width: 644px;
    }

    .picbox {
        border: 1px solid black;
        height: 100px;
        width: 100px;
        margin: 0.5em;
        display: inline-block;
        clear: both;
    }
    
    .side-left {
        margin-bottom: 0.65em;
    }
</style>
<div class="hl-kegiatan">
    <div class="title">Kegiatan PS</div>
    <?php $this->view("kegiatan/hlkegiatan"); ?>
</div>
<div class="berita-kegiatan">
    <div class="title" style="margin-bottom: 0.3em;">Berita Kegiatan</div>
    <div class="beritabox">
        <ul>
            <li><b><a href="#tab-terbaru">Terbaru</a></b></li>
            <li><b><a href="#tab-populer">Populer</a></b></li>
        </ul>
        <div id="tab-terbaru" style="padding-top: 0.9em;">
            <div class="listBerita">
            </div>
            <div style="text-align: right; width: 100%;margin-top: 1.6em;margin-bottom: -0.1em;">
                Halaman :
                <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) - 1);
                        changePage('terbaru');" class="page-prev"><<</a>
                <span class="page-cur">1</span>
                <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) + 1);
                        changePage('terbaru');" class="page-next">>></a>
            </div>
        </div>
        <div id="tab-populer" style="padding-top: 0.9em;">
            <div class="listBerita">
            </div>
            <div style="text-align: right; width: 100%;margin-top: 1.6em;margin-bottom: -0.1em;">
                Halaman :
                <a href="#tab-populer" onClick="javascript: $('#tab-populer .page-cur').text(parseInt($('#tab-populer .page-cur').text()) - 1);
                        changePage('terpopuler');" class="page-prev"><<</a>
                <span class="page-cur">1</span>
                <a href="#tab-populer" onClick="javascript: $('#tab-populer .page-cur').text(parseInt($('#tab-populer .page-cur').text()) + 1);
                        changePage('terpopuler');" class="page-next">>></a>
            </div>
        </div>
    </div>
</div>

<div style="width: 650px;">
    <hr />
</div>
<div class="container" style="width: 100%; text-align: center;">
    <?php foreach ($picList as $pic) { ?>
        <div style="display: inline-block;">
            <div class="picbox" style="background-image: url('<?php echo $pic->tmb; ?>');"></div>
        </div>
    <?php }; ?>
</div>
<div style="width: 650px;">
    <hr />
</div>

<script type="text/javascript">
                    jQuery(document).ready(function($) {
                        $(".beritabox").tabs({
                            beforeLoad: function(event, ui) {
                                ui.jqXHR.error(function() {
                                    ui.panel.html(
                                            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                            "If this wouldn't be a demo.");
                                });
                            }
                        });
                        changePage("terbaru");
                        changePage("terpopuler");
                    });

                    function changePage(type) {
                        var idTab = "";
                        var urlServ = "";
                        switch (type) {
                            case "terbaru":
                                idTab = "#tab-terbaru";
                                urlServ = "bkrecents";
                                break;
                            case "terpopuler":
                                idTab = "#tab-populer";
                                urlServ = "bkpopulars";
                                break;
                        }
                        // update pager
                        var curPage = parseInt($(idTab + ' .page-cur').text()) - 1;
                        if (curPage < 1) {
                            $(idTab + ' .page-prev').addClass("invisible");
                        } else {
                            $(idTab + ' .page-prev').removeClass("invisible");
                        }
                        // update list
                        $(idTab + " .listBerita").html("Loading...");
                        $.ajax({
                            url: "<?php echo site_url("service/getDataJSON"); ?>/" + urlServ,
                            method: "POST",
                            dataType: "json",
                            data: {
                                page: curPage
                            },
                            success: function(data) {
                                $(idTab + " .listBerita").html("");
                                if (data.length > 0) {
                                    for (var i = 0; i < data.length; i++) {
                                        var berita = data[i];
                                        var newBerita = "";
                                        newBerita += "<div style='display: block; clear: both;'>";
                                        newBerita += "<a href='<?php echo site_url("kegiatan/detail"); ?>/" + berita.activity_id.id + "/" + berita.id + "'><h2 style='margin-bottom: 0.2em;'>" + berita.content_id.title + "</h2></a>";
                                        newBerita += "<div style='font-style: italic; margin-bottom: -0.05em;'>Diposting " + berita.content_id.posted + " pada <b><a href='<?php echo site_url("kegiatan/detail"); ?>/" + berita.activity_id.id + "'>" + berita.activity_id.content_id.title + "</a></b></div>";
                                        newBerita += "<p>" + berita.content_id.short + "</p>";
                                        newBerita += "</div>";
                                        $(idTab + " .listBerita").append(newBerita);
                                    }
                                }
                            }
                        });
                    }
</script>